<template>
	<view>
		<!-- 搜索 -->
		<u-loading-icon show size="50" v-if="cilice" text="加载中" color="red"></u-loading-icon>
		<view v-else>
			<view class="search" @click="toSearch">
						<view class="minSearch">
								<i class="iconfont icon-sousuo"></i>
								这里有很多宝贝哟
						</view>
				</view>
			<!-- 整体 -->
			<view  class="whole">
				<!--左边 -->
				<view class="left">
						<view class="font" v-for=" (item,index) in categoryList" :key="index">
								<view @click="handlerCategoryItem(item,index)" class="text" :class="{active:navId===index}">{{item.title}}</view>
						</view>
				</view>
				<!-- 右边 -->
				<view class="right">
					<!-- 上图 -->
					<view class="pic">
							<image :src="CategoryListItem.banner.imgSrc"></image>
					</view>
					<!-- 全部 -->
					<view class="all">
							全部
					
					</view>
						<scroll-view scroll-y="true" class="cards"  enable-flex>
								
						<view class="cardItem" v-for="(item,index) in imageItem" :key="item.link.id" @click="handlerToDetail(item.link.id)">
							<image :src="item.imgSrc"></image>
							<view class="xiaoxi">{{item.title}}</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapActions,mapState} from "vuex"
	export default {
		data() {
			return {
				navId:0,//默认
				CategoryListItem:"",
				imageItem:[],
				cilice:true,//小拳拳
			};
		},
		watch:{
			categoryList:{
				// immediate:true, //不立即监视
				handler(item){
					this.cilice=false
					if(this.navId===0){
						this.CategoryListItem=item[0]
						this.imageItem=item[0].subCategoryList[0].thirdCategoryList||[]
					}
				}
			}
		},
		computed:{
			...mapState({
				categoryList:state=>state.category.categoryList,
			})
		},
		methods:{
			...mapActions(["getCategoryList"]),
			handlerCategoryItem(item,index){
				if(this.imageItem){
					this.imageItem=[]
				}
				item.subCategoryList.forEach(item=>{
					 item.thirdCategoryList.forEach(item=>{
						 this.imageItem.push(item)
					 })
				})
				this.navId=index
				this.CategoryListItem=item
				
			},
			//跳转详情页
			handlerToDetail(id){
				wx.navigateTo({
					url:'/pages/detail/detail?id='+id
				})
			},
			//跳转搜索页
			toSearch(){
				wx.navigateTo({
					url:'/pages/search/search'
				})
			}
		},
		mounted(){
			this.getCategoryList()
		},
	}
</script>

<style lang="stylus">
	.u-loading-icon
		position fixed;
		top 50%;
		left 50%;
		.u-loading-icon__text
			position absolute;
			top 55px;
			left 0;
	.search
		width 100%
		height 110upx
		background-image: linear-gradient(to right, #ecf5fa ,#f9ede9 )
		overflow hidden
		.minSearch
			 width 600upx
			 height 50upx
			 background-color #f8f7f9
			 margin-top 50upx
			 margin-left 20upx
			 display flex
			 color #b9b4b2
			 line-height 50upx
			 .iconfont 
				margin 2px
	.whole
		display flex
		height 100%
		
		.left
			width 25%
			height 100%
			background #f8f8f8
			.font
				color #c7c7c7
				height 116upx
				width 100%
				overflow hidden
				.text
					margin-top 20px
					font-size 28upx
					text-align center
				.active
					border-left 10upx solid #ba1b28 
		.right
			width 80%
			height 100%
			background #ffffff
			padding 0 30upx
			.pic
				image
					width 100%
					height 200upx
					margin 30upx 0
			.all
				background #dac59d
				width 110upx
				height 53upx
				text-align center
				line-height 53upx
				color #fff
			.cards
				width 100%
				display flex
				flex-wrap: wrap;
				justify-content: space-between;
				.cardItem
					width 30%
					height 180upx
					margin-top 68upx
					image
						width 100%
						height 140upx
					.xiaoxi
						font-size 22upx
						text-align center
</style>
